<template>
    <div
        v-loading.fullscreen.lock="fullscreenLoading"
        class="main-article"
        element-loading-text="Efforts to generate PDF"
    >
        <div class="article__heading">
            <div class="article__heading__title">
                {{ article.title }}
            </div>
        </div>
        <div style="color: #ccc;">
            This article is from Evan You on
            <a
                target="_blank"
                href="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf"
                >medium</a
            >
        </div>
        <div
            ref="content"
            class="node-article-content"
            v-html="article.content"
        />
    </div>
</template>

<script>
export default {
    data() {
        return {
            article: "",
            fullscreenLoading: true
        };
    },
    mounted() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            import("./content.js").then(data => {
                const { title } = data.default;
                document.title = title;
                this.article = data.default;
                setTimeout(() => {
                    this.fullscreenLoading = false;
                    this.$nextTick(() => {
                        window.print();
                    });
                }, 3000);
            });
        }
    }
};
</script>

<style lang="scss">
@mixin clearfix {
    &:before {
        display: table;
        content: "";
        clear: both;
    }

    &:after {
        display: table;
        content: "";
        clear: both;
    }
}

.main-article {
    padding: 20px;
    margin: 0 auto;
    display: block;
    width: 740px;
    background: #fff;
}

.article__heading {
    position: relative;
    padding: 0 0 20px;
    overflow: hidden;
}

.article__heading__title {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 32px;
    line-height: 48px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
}

.node-article-content {
    margin: 20px 0 0;
    @include clearfix;
    font-size: 16px;
    color: #333;
    letter-spacing: 0.5px;
    line-height: 28px;
    margin-bottom: 30px;
    font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman",
        Times, serif;

    & > :last-child {
        margin-bottom: 0;
    }

    b,
    strong {
        font-weight: inherit;
        font-weight: bolder;
    }

    img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    p {
        font-weight: 400;
        font-style: normal;
        font-size: 21px;
        line-height: 1.58;
        letter-spacing: -0.003em;
    }

    ul {
        margin-bottom: 30px;
    }

    li {
        --x-height-multiplier: 0.375;
        --baseline-multiplier: 0.17;

        letter-spacing: 0.01rem;
        font-weight: 400;
        font-style: normal;
        font-size: 21px;
        line-height: 1.58;
        letter-spacing: -0.003em;
        margin-left: 30px;
        margin-bottom: 14px;
    }

    a {
        text-decoration: none;
        background-repeat: repeat-x;
        background-image: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.84) 100%,
            rgba(0, 0, 0, 0) 0
        );
        background-size: 1px 1px;
        background-position: 0 calc(1em + 1px);
        padding: 0 6px;
    }

    code {
        background: rgba(0, 0, 0, 0.05);
        padding: 3px 4px;
        margin: 0 2px;
        font-size: 16px;
        display: inline-block;
    }

    img {
        border: 0;
    }

    /* 解决 IE6-7 图片缩放锯齿问题 */
    img {
        -ms-interpolation-mode: bicubic;
    }

    blockquote {
        --x-height-multiplier: 0.375;
        --baseline-multiplier: 0.17;
        font-family: medium-content-serif-font, Georgia, Cambria,
            "Times New Roman", Times, serif;
        letter-spacing: 0.01rem;
        font-weight: 400;
        font-style: italic;
        font-size: 21px;
        line-height: 1.58;
        letter-spacing: -0.003em;
        border-left: 3px solid rgba(0, 0, 0, 0.84);
        padding-left: 20px;
        margin-left: -23px;
        padding-bottom: 2px;
    }

    a {
        text-decoration: none;
    }

    h2,
    h3,
    h4 {
        font-size: 34px;
        line-height: 1.15;
        letter-spacing: -0.015em;
        margin: 53px 0 0;
    }

    h4 {
        font-size: 26px;
    }
}
</style>
